<template>
  <view class="pageContent">
    <view class="houseMain" v-for="(item,index) in headList" :key="index" @click="selectHead(index)"
      :class="item.roomId==room.roomId ? 'select' : ''">
      <view class="houseTil">
        <view class="houseTilNa">{{item.projectName || '项目名称'}}</view>
        <!-- <view>入住日期</view> -->
      </view>
      <view class="houseNo">
        <view>{{item.roomInfo+'-'+item.roomName}}</view>
        <view class="houseMes">
          <!-- <view class="houseMesIt">{{item.name}}</view> -->
          <view class="houseMesIt" v-if="item.aaa">{{item.aaa}}</view>
        </view>
      </view>
      <view class="handler">
        <view class="handlerCha handlerRed" @click.stop="goDoorList(index)">门禁权限</view>
        <view class="handlerCha handlerBlu" v-if="item.roomId==room.roomId && (userMsg.roleId==16 || userMsg.roleId==17)" @click.stop="addMem(index)">
          添加成员</view>
      </view>
      <image class="houseListIm" v-if="item.roomId==room.roomId" :src="localImages +'/selectHouse.png'" />
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'
  export default {
    data() {
      return {
        images: config.images,
        localImages: config.localImages,
        headList: [],
        room: '',
        userMsg: '',
      }
    },
    computed: {
      ...mapState({
        myInfo: state => state.user.myInfo
      })
    },
    onLoad() {
      var room = wx.getStorageSync('room');
      this.room = room;
      this.ownerRoomList();
    },
    onShow() {
      var userMsg = wx.getStorageSync('userMsg');
      this.userMsg = userMsg;
      util.socketTest();
    },
    methods: {
      goDoorList(index) {
        var item = this.headList[index];
        var json = JSON.stringify(item);
        // console.warn(item, json)
        if (item.roomId == this.room.roomId) {
          wx.navigateTo({
            url: '/pages/subMe/doorList/main?json=' + json
          })
        } else {
          this.noticeList(item).then(() => {
            wx.navigateTo({
              url: '/pages/subMe/doorList/main?json=' + json
            })
          });
        }
      },
      noticeList(room) {
        return new Promise((resolve, reject) => {
          var url = '/UserServer/weChat/ownerLogin'
          var phone = wx.getStorageSync('phone');
          var openId = wx.getStorageSync('openId');
          var params = {
            "telephone": phone,
            "roomIdNow": room.roomId,
            "openId": openId
          }
          util.wxRequestPro(url, params, "POST").then((res) => {
            console.warn('ownerLogin', res)
            var param = res.param
            wx.setStorageSync('room', room);
            wx.setStorageSync('userMsg', param);
            this.room = room
            this.userMsg = param //更新用户的当前角色信息
            resolve(res)
          }).catch((res) => {
            console.warn('catch=ownerLogin', res)
          })
        })
      },
      ownerRoomList() {
        var phoneNumber = wx.getStorageSync('phone');
        //获取业主该手机号绑定的房屋列表
        var params = {
          telephone: phoneNumber
        }
        util.wxRequestPro('/UserServer/room/ownerRoomList', params)
          .then((res) => {
            console.warn('ownerRoomList', res)
            var param = res.param;
            this.headList = param
          }).catch((res) => {
            if (res.statusCode == 400) {
              wx.showToast({
                title: res.statusInfo || '手机没有绑定房屋',
                icon: 'none'
              })
            }
          })
      },
      selectHead(index) {
        var item = this.headList[index]
        this.noticeList(item);
      },
      //先选择了当前房屋，再进行添加成员的操作
      addMem(index) {
        wx.showLoading({
          title: '',
          mask: true,
          duration: 800
        })
        var item = this.headList[index]
        if (item.roomId == this.room.roomId) {
          wx.navigateTo({
            url: '/pages/subMe/addMem/main'
          })
        } else {
          this.noticeList(item).then(() => {
            wx.navigateTo({
              url: '/pages/subMe/addMem/main'
            })
          });
        }
      },

    }
  }
</script>

<style lang="stylus" scoped>
  .pageContent {
    height: 100vh;
    background: #F3F6F9;
    padding: 20rpx 0rpx 0rpx 0rpx;
  }

  .houseMain {
    position: relative;
    background: #FFFFFF;
    padding: 0rpx 14rpx 0rpx 14rpx;
    margin: 0rpx 0rpx 20rpx 0rpx;
  }

  .houseMain.select {
    box-shadow: 2rpx 6rpx 8rpx 0px rgba(201, 206, 216, 0.5);
  }

  .houseTil {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 14rpx 14rpx 14rpx;
    line-height: 45rpx;
    font-size: 32rpx;
    color: #030303;
    border-bottom: 0.3px solid #E7E7E7;
  }

  .houseTilNa {
    font-size: 32rpx;
    font-weight: bold;
  }

  .houseNo {
    padding: 14rpx 14rpx 14rpx 14rpx;
    font-size: 32rpx;
    color: #030303;
    border-bottom: 0.3px solid #E7E7E7;
  }

  .houseListIm {
    position: absolute;
    width: 109rpx;
    height: 91rpx;
    top: 5rpx;
    right: 156rpx;
  }

  .houseMes {
    display: flex;
    padding: 14rpx 0rpx 14rpx 0rpx;
  }

  .houseMesIt {
    height: 40rpx;
    line-height: 40rpx;
    background: #F2F8FF;
    border-radius: 6rpx;
    border: 1px solid #BCDEFF;
    color: #519AEE;
    font-size: 28rpx;
    margin-right: 10rpx;
    padding: 0rpx 14rpx 0rpx 14rpx;
  }

  .handler {
    display: flex;
    justify-content: flex-end;
    padding: 14rpx 14rpx 20rpx 14rpx;
    width: 100%;
  }

  .handlerCha {
    height: 60rpx;
    width: 160rpx;
    line-height: 60rpx;
    background: #DDDDDD;
    border-radius: 30rpx;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
  }

  .handlerBlu {
    background: #1086FF;
    margin-left: 18rpx;
  }

  .handlerRed {
    background: #FF635D;
    margin-left: 18rpx;
  }
</style>
